<%--
  Created by IntelliJ IDEA.
  User: lanmeng
  Date: 2020/8/20
  Time: 15:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script src="${pageContext.request.contextPath}/static/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/static/toastr/toastr.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css"  href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"  href="${pageContext.request.contextPath}/member/css/list.css">
<link rel="stylesheet" type="text/css"  href="${pageContext.request.contextPath}/static/toastr/toastr.min.css">
<script src="${pageContext.request.contextPath}/member/js/recharge.js" type="text/javascript" charset="utf-8"></script>
<html>
<head>
    <title>会员充值</title>
</head>
<style>
    .sp{
        position: absolute;
        margin-left: 30%;
        color: red;
        font-size: 1px;
        display: none;
    }

</style>
<body>
<div>
    <div style="padding:20px;">
        <form role="form" class="form-inline">
            <div class="form-group">
                <label>会员卡号</label>
                <input type="text" class="form-control cardId" placeholder="会员卡号" />
            </div>
            <div class="form-group">
                <label>会员姓名</label>
                <input type="text" class="form-control userName" placeholder="会员姓名"/>
            </div>
            <button type="button" class="btn btn-primary btn-sm"  onclick="page(1,pageBean.pageSize)">搜索</button>
        </form>
    </div>
    <div>
        <table class="table table-hover table-bordered" style="text-align: center">
            <thead >
            <tr style="background-color: #BBDCFB" >
                <th>会员卡号</th>
                <th>持卡人姓名</th>
                <th>会员ID</th>
                <th>会员等级</th>
                <th>卡余额</th>
                <th>会员积分</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tb"></tbody>
        </table>
    </div>
    <div class="form-inline">
			<span id="navBar">显示第<span id="start">0</span>到<span id="end"></span>条，总共<span id="count"></span>页记录，每页显示
                <div class="btn-group dropup">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span id="pageCount"></span>&nbsp;&nbsp;<span class="caret"></span></button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="javascript:page(1,5)">5</a></li>
                <li><a href="javascript:page(1,10)">10</a></li>
                <li><a href="javascript:page(1,50)">50</a></li>
                <li><a href="javascript:page(1,100)">100</a></li>
            </ul>
        </div>
				条记录</span>
        <div class="btn-group pull-right">
            <nav  aria-label="Page navigation" >
                <ul class="pagination" id="page" style="margin: 0px 0">
                </ul>
            </nav>
        </div>

    </div>


</div>
<!--充值模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    充值
                </h4>
            </div>
            <div class="modal-body">
                <form id="cardForm">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group input-group">
                                <span class="input-group-addon">会员卡号</span>
                                <input class="form-control" placeholder="会员卡号" readonly="readonly" name="cardId" id="cardId">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group input-group">
                                <span class="input-group-addon">卡余额</span>
                                <input class="form-control" placeholder="卡余额" readonly="readonly" name="amount" id="amount">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group input-group">
                                <span class="input-group-addon">会员积分</span>
                                <input class="form-control" placeholder="会员积分" readonly="readonly" name="credit" id="credit">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group input-group">
                                <span class="input-group-addon">充值活动</span>
                                <select class="form-control" id="rechargeRule" name="rechargeRule">
                                </select>

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group input-group " id="sp_s">
                                <span class="input-group-addon">充值金额</span>

                                <input id="coefficient" value="0" hidden>
                                <input class="form-control" placeholder="请输入充值金额" id="recharge" name="recharge" id="recharge" onkeyup="this.value=this.value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">
                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group input-group " >
                                <span class="input-group-addon">备注</span>
                                <input class="form-control" placeholder="备注"  name="recharge" id="momo" >
                            </div>
                            <div class="sp" id="sp">充值金额最少<span id="money">10</span></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="btn();">
                    确认
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--充值模态框-->
<!--修改会员卡状态模态框-->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel1">
                    修改会员卡状态
                </h4>
            </div>
            <div class="modal-body">
                <form id="cardForm1">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group input-group">
                                <span class="input-group-addon">会员卡号</span>
                                <input class="form-control" placeholder="会员卡号"  name="cardId" id="cardId1" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group input-group">
                                <span class="input-group-addon">会员ID</span>
                                <input class="form-control" placeholder="会员ID"  name="userId" id="userId1" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group input-group">
                                <span class="input-group-addon">卡余额</span>
                                <input class="form-control" placeholder="默认1000" readonly="readonly" name="amount" id="amount1" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group input-group">
                                <span class="input-group-addon">会员积分</span>
                                <input class="form-control" placeholder="默认1000" readonly="readonly" name="credit" id="credit1" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group input-group">
                                <span class="input-group-addon">状态</span>
                                <select class="form-control" id="status1" name="status">
                                    <option value="1">启用</option>
                                    <option value="0">禁用</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="btn1();">确认
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>

    /**
     * 提示信息
     */
    $("#recharge").bind('input porpertychange', function () {
        if($("#recharge").val()<parseInt($("#money").html())){
            document.getElementById("sp").style.display="block";
            document.getElementById("sp_s").className="form-group input-group has-error"
        }else{
            document.getElementById("sp").style.display="none";
            document.getElementById("sp_s").className="form-group input-group has-success"
        }
    })
    $("#recharge").blur(function () {
        if($("#recharge").val()<parseInt($("#money").html())||$("#recharge").val()=="."){
            document.getElementById("sp").style.display="block";
            document.getElementById("sp_s").className="form-group input-group has-error"
        }else{
            document.getElementById("sp").style.display="none";
            document.getElementById("sp_s").className="form-group input-group has-success"
        }
    })



    /**
     * 提示信息的金额显示
     */
    $("#rechargeRule").change(function () {
        $.ajax({
            type:"post",
            url:"/rechargeServlet/findRecharge",
            success:function (data) {
                console.log(data)
                for (let i = 0; i < data.length; i++) {
                    if ($("#rechargeRule").val()==data[i].id){
                        console.log(data[i])
                        $("#money").html(data[i].startMoney);
                        $("#coefficient").val(data[i].coefficient)
                    }
                }
                if($("#recharge").val()<parseInt($("#money").html())){
                    document.getElementById("sp").style.display="block";
                    document.getElementById("sp_s").className="form-group input-group has-error"
                }else {
                    document.getElementById("sp").style.display="none";
                    document.getElementById("sp_s").className="form-group input-group has-success"
                }
            },
            dataType: "json"
        });

    })
</script>
</body>
</html>
